<template>
  <div class="width240 formula-input-container">
    <div v-if="value || value === false || value === 0" class="formula-input-inner ellipsisOne">{{ handelValue(value) }}</div>
    <div v-else class="formula-input-inner ellipsisOne placeholder">{{ element.options.placeholder }}</div>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'value',
    event: 'changeValue'
  },
  props: {
    value: {
      type: Object | Array | String | Number,
      default: null
    },
    element: {
      type: Object,
      default: () => ({})
    },
    isPreView: { // 是否配置中
      type: Boolean,
      default: false
    }
  },
  methods: {
    handelValue(value) {
      if (!value && value !== 0 && value !== false) return '--';
      if (this.element.options.modeType) {
        return value;
      }
      const precision = this.element.options.precision;
      if (precision || precision === 0) {
        return Number(Number(value).toFixed(precision));
      }
      return value;
    }
  }
};
</script>

<style lang="scss" scoped>
.formula-input-inner {
  font-size: 14px;
  padding: 0 8px;
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  border: 1px solid #E4E7ED;
  width: 100%;
  background-color: #F5F7FA;
  color: #C0C4CC;
  cursor: not-allowed;
}
.formula-input-container {
  display: flex;
  align-items: center;
}
.width240 {
  width: 100%;
}
</style>
